<template>
  <div class="pay-container">
    <!-- 生成微信支付二维码 -->
    <div class="erwei" v-loading="loading">
      <img :src="qrUrl" alt="" />
    </div>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-wechat_pay"></use>
    </svg>
    <span>使用微信进行支付</span>
    <el-descriptions title="订单详情">
      <el-descriptions-item label="订单号">
        {{ order_detail.order_id }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        order.create_time
      }}</el-descriptions-item>
      <el-descriptions-item label="产品名称">{{
        order_detail.productName
      }}</el-descriptions-item>
      <el-descriptions-item label="商品描述">{{
        order_detail.description
      }}</el-descriptions-item>
      <el-descriptions-item label="购买数量">{{
        order_detail.quantity
      }}</el-descriptions-item>
      <el-descriptions-item label="购买用户">{{
        order.user_nickname
      }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{
        order.address
      }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{
        order.user_phone
      }}</el-descriptions-item>
      <el-descriptions-item label="总价格">{{ total }} </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import * as payApi from '@/api/pay'
import qr from 'qrcode'
// 1. 需要通过订单的id 获取订单详情
// 2. 根据订单id 请求支付接口
// 3. 通过轮询查询支付状态
export default {
  data() {
    return {
      loading: true,
      order_detail: {}, // 订单详情
      qrUrl: '', // 支付二维码地址
      order: {}, // 订单详情
      order_id: '' // 传过来的query参数
    }
  },
  computed: {
    // 计算总价格
    total() {
      return (this.order_detail.price * this.order_detail.quantity).toFixed(2)
    }
  },
  methods: {
    // 查询订单结果
    queryOrderStatus() {
      // 使用定时器发送请求 进行轮询 2s轮询一次
      this.queryInterval = setInterval(async () => {
        let res = await payApi.queryOrderStatus(this.order_id)
        // console.log(res)
        if(res.data.status === 200) {
          // 支付成功 跳转到支付成功的页面
          this.$router.push({name: 'paysuccess'})
          // 支付成功清除
          localStorage.removeItem('yue-product')
        }
      }, 2000)
    }
  },
  async created() {
    this.loading = true
    // 并发请求, 请求详情, 请求支付
    // 传递过来的 order_id
    this.order_id = this.$route.query.order_id
    // 判断有没有 order_id 没有就返回到充值页
    if (!this.order_id) {
      // 防止手动访问 强制返回充值页
      return this.$router.push('/vipmanager/charge')
    }
    // console.log(order_id)
    // 使用 Promise.all 并发请求 顺序按照先后顺序 返回一个 Promise 结果是个数组
    let res = await Promise.all([
      payApi.getOrder(this.order_id),
      payApi.startPay(this.order_id)
    ])

    // 发起轮询查询支付结果
    this.queryOrderStatus() // 查询支付状态

    // console.log(res)
    // 订单详情赋值
    this.order_detail = res[0].data.data.orderDetail[0]
    this.order = res[0].data.data
    // console.log(this.order_detail)

    // 判断订单是否重复提交
    if (!res[1].data.state) {
      // 返回充值页面
      this.$router.push('/vipmanager/charge')
      // 关闭加载动画
      this.loading = false
      return
    }

    // 需要生成二维码
    // 下载 qrcode 插件 生成二维码
    let payUrl = res[1].data.code_url
    qr.toDataURL(payUrl, (err, imgBase64Url) => {
      if (err) {
        // 出错的情况 抛出错误
        return this.$messageBox.error(err)
      }
      // console.log(imgBase64Url)
      // 成功的情况把二维码图片地址赋值给定义在data中的 imgBase64Url
      this.qrUrl = imgBase64Url
      // 获取到二维码地址 关掉二维码的加载动画
      this.loading = false
    })
  },
  beforeDestroy() {
    // 离开组件之前清除定时器 停止轮询
    clearInterval(this.queryInterval)
  }
}
</script>

<style></style>
